<template>
    <div class="flexC colorF" style="width:100%;height:100%;">
        <div class="flex JustifyContentSA" style="width:100%;height:2.25rem;">
            <p class="flex1 riskModal-title textC font_s26">识险</p>
            <p class="flex1 riskModal-title textC font_s26">排险</p>
            <p class="flex1 riskModal-title textC font_s26">评险</p>
        </div>
        <div class="flex" style="width:100%;height:100%;">
            <div class="flex1">
                <div style="position:absolute;top:22%;left:6.95%;z-index:1;">
                    <img src="../../../assets/img/comprehensive/left/26.png" alt="" style="width: 0.145rem">
                </div>
                <div class="flexC colorF font_s18" style="position:relative;z-index:99;">
                    <div class="riskModal-leftItem" style="margin-top: 2.25rem;">
                        <p class="leftItem-title">登记备案</p>
                        <p class="leftItem-content">证书是否过期</p>
                        <p class="leftItem-content">活动是否备案</p>
                    </div>
                    <div class="riskModal-leftItem">
                        <p class="leftItem-title">年检</p>
                        <p class="leftItem-content">是否参加年度检查</p>
                        <p class="leftItem-content">参检结果是否合格</p>
                    </div>
                    <div class="riskModal-leftItem">
                        <p class="leftItem-title">委办局</p>
                        <p class="leftItem-content">部门协查函</p>
                        <p class="leftItem-content">部门监管意见</p>
                    </div>
                    <div class="riskModal-leftItem">
                        <p class="leftItem-title">信访舆情</p>
                        <p class="leftItem-content">社会组织违规情况</p>
                    </div>
                </div>
            </div>
            <div class="flex2 flexC">
                <div class="flex3 flexC JustifyContentSA" style="margin-top:0.825rem;">
                    <div class="flex JustifyContentSA AlignItemsC">
                        <p class="bgImg-circle bgImg01 font_s26 weightBold">高风险</p>
                        <!-- 风险的主要内容 -->
                        <div class="bgImg-rect" style="color: #EE6B6A;">
                            <div class="flex font_s20 weightBold" style="padding: 0.325rem 0px;">
                                <p style="width:90%;">连续两年及以上未参检</p>
                            </div>
                        </div>
                        <p><img src="../../../assets/img/comprehensive/left/11.png" alt=""></p>
                        <!-- 排险方案 -->
                        <div class="flex font_s20 weightBold">
                            <p class="bgImg_rightSmall01">应急排险</p>
                            <div class="bgImg_rightBig01 flexC JustifyContentSA">
                                <p style="width:80%;">启动行政处罚执行流程</p>
                            </div>
                        </div>
                    </div>
                    <div class="flex JustifyContentSA AlignItemsC">
                        <p class="bgImg-circle bgImg02 font_s26 weightBold">中风险</p>
                        <!-- 风险的主要内容 -->
                        <div class="bgImg-rect weightBold font_s20" style="color: #75F1D0;">
                            <div class="flex" style="padding: 0.325rem 0px;">
                                <p style="width:90%;">当年未参检</p>
                            </div>
                            <div class="flex" style="padding: 0.325rem 0px;">
                                <p style="width:90%;">社会组织违规情况</p>
                            </div>
                            <div class="flex" style="padding: 0.325rem 0px;">
                                <p style="width:90%;">证书过期两年</p>
                            </div>
                        </div>
                        <p><img src="../../../assets/img/comprehensive/left/12.png" alt=""></p>
                        <!-- 排险方案 -->
                        <div class="flex font_s20 weightBold">
                            <p class="bgImg_rightSmall02">专项整治</p>
                            <div class="bgImg_rightBig02 flexC JustifyContentSA">
                                <p style="width:80%;">出具整改通知书</p>
                                <p style="width:80%;">约谈访谈</p>
                            </div>
                        </div>
                    </div>
                    <div class="flex JustifyContentSA AlignItemsC">
                        <p class="bgImg-circle bgImg03 font_s26 weightBold">低风险</p>
                        <!-- 风险的主要内容 -->
                        <div class="bgImg-rect weightBold font_s20" style="color: #66BEFF;">
                            <div class="flex" style="padding: 0.325rem 0px;">
                                <p style="width:90%;">证书过期一年</p>
                            </div>
                        </div>
                        <p><img src="../../../assets/img/comprehensive/left/13.png" alt=""></p>
                        <!-- 排险方案 -->
                        <div class="flex font_s20 weightBold">
                            <p class="bgImg_rightSmall03">跟踪查证</p>
                            <div class="bgImg_rightBig03 flexC JustifyContentSA">
                                <p style="width:80%;">智能提醒</p>
                                <p style="width:80%;">电话告知</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex2 flexC AlignItemsC">
                    <div class="bgImg_rightBox">
                        <p class="colorF textC" style="line-height:2.585rem;">风险内容评估模型</p>
                        <p class="flex textC bgImg_boxTitle" style="margin: 0.525rem auto 0.225rem auto;">
                            <span class="flex1">类型</span>
                            <span class="flex1">风险内容</span>
                            <span class="flex1">监管方式</span>
                            <span class="flex1">检查频次</span>
                        </p>
                        <div class="flex textC JustifyContentSA AlignItemsC" style="padding: 0 4.625rem;">
                            <p class="bgImg_boxContent01">社会组织风险</p>
                            <p><img src="../../../assets/img/comprehensive/left/12.png" alt=""></p>
                            <p class="flexC">
                                <span class="bgImg_boxContent02 bgImg_boxContent02_1">舆情预警投诉举报</span>
                                <span class="bgImg_boxContent02 bgImg_boxContent02_2">六个双信息</span>
                                <span class="bgImg_boxContent02 bgImg_boxContent02_3">证书信息年检情况</span>
                                <span class="bgImg_boxContent02 bgImg_boxContent02_4">实地检查财务审计情况</span>
                            </p>
                            <p><img src="../../../assets/img/comprehensive/left/13.png" alt=""></p>
                            <p class="bgImg_boxContent01">动态监管</p>
                            <p><img src="../../../assets/img/comprehensive/left/11.png" alt=""></p>
                            <div>
                                <p class="bgImg_boxContent03">年检一年一次</p>
                                <p class="bgImg_boxContent03">换证三个月提醒</p>
                                <p class="bgImg_boxContent03">信访舆情24H核查</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  name: 'RiskModal',
  data () {
    return {}
  }
}
</script>
<style scoped>
.riskModal-title {
    background: url(../../../assets/img/comprehensive/left/04.png) no-repeat center;
    background-size: 70% 100%;
}
.riskModal-leftItem {
    margin-left: 6.825rem;
    margin-bottom: 1.225rem;
}
.leftItem-title {
    background: url(../../../assets/img/comprehensive/left/05.png) no-repeat;
    background-size: 100% 100%;
    width: 10.625rem;
    height: 3.225rem;
    line-height: 3.225rem;
    padding-left: 2.625rem;
}
.leftItem-content {
    background: url(../../../assets/img/comprehensive/left/06.png) no-repeat center;
    background-size: 100% 100%;
    width: 22.285rem;
    line-height: 1.275rem;
    padding:1.225rem 2.225rem;
    margin-left: 0.875rem;
}
.bgImg-circle {
    /* font-size: 26px; */
    text-align: center;
    width:6.25rem;
    height: 6.25rem;
    line-height:6.25rem;
}
.bgImg01 {
    background: url(../../../assets/img/comprehensive/left/08.png) no-repeat center;
    background-size: 100% 100%;
    color: #EE6B6A;
}
.bgImg02 {
    background: url(../../../assets/img/comprehensive/left/09.png) no-repeat center;
    background-size: 100% 100%;
    color: #4FA791;
}
.bgImg03 {
    background: url(../../../assets/img/comprehensive/left/10.png) no-repeat center;
    background-size: 100% 100%;
    color: #3E92D4;
}
.bgImg-rect {
    background: url(../../../assets/img/comprehensive/left/07.png) no-repeat center;
    background-size: 100% 100%;
    padding:1rem 1rem;
    width: 36%;
}
.bgImg_rightSmall01 {
    writing-mode: vertical-lr;
    height:6rem;
    letter-spacing:0.25rem;
    padding: 1rem 0.725rem 0.125rem;
    color: #EE6B6A;
    background: url(../../../assets/img/comprehensive/left/14.png) no-repeat center;
    background-size: 100% 100%;
}
.bgImg_rightBig01 {
    width:23.625rem;
    /* font-size: 20px; */
    padding-left: 2rem;
    box-sizing: border-box;
    background: url(../../../assets/img/comprehensive/left/15.png) no-repeat center;
    background-size: 100% 100%;
}
.bgImg_rightSmall02 {
    writing-mode: vertical-lr;
    height:6rem;
    letter-spacing:0.25rem;
    padding: 1rem 0.725rem 0.125rem;
    color: #4FA791;
    background: url(../../../assets/img/comprehensive/left/17.png) no-repeat center;
    background-size: 100% 100%;
}
.bgImg_rightBig02 {
    width:23.625rem;
    /* font-size: 20px; */
    padding: 2rem 0 2rem 2rem;
    box-sizing: border-box;
    background: url(../../../assets/img/comprehensive/left/16.png) no-repeat center;
    background-size: 100% 100%;
}
.bgImg_rightSmall03 {
    writing-mode: vertical-lr;
    height:6rem;
    letter-spacing:0.25rem;
    padding: 1rem 0.725rem 0.125rem;
    color: #3E92D4;
    background: url(../../../assets/img/comprehensive/left/18.png) no-repeat center;
    background-size: 100% 100%;
}
.bgImg_rightBig03 {
    width:23.625rem;
    /* font-size: 20px; */
    padding: 2rem 0 2rem 2rem;
    box-sizing: border-box;
    background: url(../../../assets/img/comprehensive/left/19.png) no-repeat center;
    background-size: 100% 100%;
}
.bgImg_rightBox {
    width: 90%;
    height: 90%;
    background: url(../../../assets/img/comprehensive/left/20.png) no-repeat center;
    background-size: 100% 100%;
}
.bgImg_boxTitle {
    background: url(../../../assets/img/comprehensive/left/27.png) no-repeat center;
    background-size: 100% 100%;
    line-height: 2.125rem;
    width: 92%;
    margin:0 auto;
}
.bgImg_boxContent01 {
    background: url(../../../assets/img/comprehensive/left/21.png) no-repeat center;
    background-size: 100% 100%;
    width: 16%;
    height: 3.325rem;
    line-height: 3.325rem;
}
.bgImg_boxContent02 {
    width: 12.825rem;
    height: 2.425rem;
    line-height: 2.425rem;
    margin:0.185rem 0;
}
.bgImg_boxContent02_1 {
    background: url(../../../assets/img/comprehensive/left/22.png) no-repeat center;
    background-size: 100% 100%;
}
.bgImg_boxContent02_2 {
    background: url(../../../assets/img/comprehensive/left/23.png) no-repeat center;
    background-size: 100% 100%;
}
.bgImg_boxContent02_3 {
    background: url(../../../assets/img/comprehensive/left/24.png) no-repeat center;
    background-size: 100% 100%;
}
.bgImg_boxContent02_4 {
    background: url(../../../assets/img/comprehensive/left/25.png) no-repeat center;
    background-size: 100% 100%;
}
.bgImg_boxContent03 {
    background: url(../../../assets/img/comprehensive/left/28.png) no-repeat center;
    background-size: 100% 100%;
    width: 9.625rem;
    height: 2.425rem;
    line-height: 2.425rem;
}
</style>
